<md-tabs md-dynamic-height md-stretch-tabs="always" md-border-bottom>
    <md-tab label="Properties" >
        <md-content layout-padding>
            <md-input-container class="md-block" flex-gt-xs>
                <label>Name</label>
                <input ng-model="$ctrl.network.name" name="name" type="text" ng-pattern="validate_name" md-maxlength="255">
                <div ng-messages="$ctrl.formReference.name.$error" role="alert" multiple>
                    <div ng-message="pattern" class="my-message">That doesn't look like a valid network name.</div>
                    <div ng-message="md-maxlength" class="my-message">Too long network name.</div>
                </div>
            </md-input-container>
            <md-input-container class="md-block" flex-gt-xs>
                <label>DNS Domain</label>
                <input ng-model="$ctrl.network.dns_domain" name="dns_domain" ng-pattern="validate_domain" />
                <div ng-messages="$ctrl.formReference.dns_domain.$error" role="alert" multiple>
                  <div ng-message="pattern" class="my-message">Please input a valid DNS Domain.</div>
                </div>
            </md-input-container>

            <div layout-gt-xs="row" >
                <md-input-container class="md-block" flex-gt-xs>
                    <md-checkbox ng-model="$ctrl.network.admin_state_up" aria-label="admin_state_up">
                      Admin State UP
                    </md-checkbox>
                </md-input-container>

                <md-input-container class="md-block" flex-gt-xs>
                    <md-checkbox ng-model="$ctrl.network.port_security_enabled" aria-label="port_security_enabled">
                      Port Security Enabled
                    </md-checkbox>
                </md-input-container>

                <md-input-container class="md-block" flex-gt-xs ng-if="$ctrl.admin">
                    <md-checkbox ng-model="$ctrl.network.shared" aria-label="shared">
                      Shared
                    </md-checkbox>
                </md-input-container>

            </div>
            <div layout-gt-xs="row" >
                <md-switch class="md-primary" name="show_more" ng-model="show_more">
                     {$ 'Show More Properties' | translate $}
                </md-switch>
            </div>
        </md-content>
    </md-tab>
    <md-tab label="More Properties" ng-if="show_more">
        <md-content layout-padding>
            <md-input-container class="md-block" flex-gt-xs>
                <label>QoS Policy</label>
                <md-select ng-model="$ctrl.network.qos_policy" >
                    <md-option ng-repeat="qos in options.qos_policies" ng-value="qos.id">
                        {$ qos.name $} ({$ qos.id $})
                    </md-option>
                </md-select>
            </md-input-container>

            <md-input-container class="md-block" flex-gt-xs>
                <label>Tags</label>
                <md-chips ng-model="$ctrl.network.tags"
                          placeholder="+ tags"
                          readonly="false"
                          md-removeable="true"
                          md-max-chips="255">
                </md-chips>
            </md-input-container>

            <label>Value Specs</label>
            <md-button ng-click="$ctrl.add_value_specs()" aria-label="Add" class="md-icon-button"><i class="fa fa-fw fa-plus"></i></md-button>
            <div ng-repeat="record in $ctrl.network.value_specs" ng-class-odd="'odd'" ng-class-even="'even'">
                <div layout-gt-xs="row" >
                    <md-input-container class="md-block" flex-gt-xs>
                        <label>Key</label>
                        <input ng-model="record.key" type="text">
                    </md-input-container>
                    <md-input-container class="md-block" flex-gt-xs>
                        <label>Value</label>
                        <input ng-model="record.value" type="text">
                    </md-input-container>
                    <md-button ng-click="$ctrl.delete_value_specs($index)" aria-label="Delete" class="md-icon-button"><i class="fa fa-fw fa-times"></i></md-button>
                </div>
            </div>
        </md-content>
    </md-tab>

    <md-tab label="Administration" ng-if="$ctrl.admin" >
        <md-content layout-padding>

            <md-input-container class="md-block" flex-gt-xs>
                <label>DHCP Agents</label>
                <md-chips ng-model="$ctrl.network.dhcp_agent_ids"
                          placeholder="+ dhcp agent id"
                          readonly="false"
                          md-removeable="true"
                          md-max-chips="255">
                </md-chips>
            </md-input-container>

            <md-input-container class="md-block" flex-gt-xs>
                <label>Tenant ID</label>
                <input ng-model="$ctrl.network.tenant_id" name="tenant_id" type="text" ng-pattern="uuid_nohyphen">
                <div ng-messages="$ctrl.formReference.tenant_id.$error" role="alert" multiple>
                  <div ng-message="pattern" class="my-message">That doesn't look like a valid tenant id.</div>
                </div>
          </md-input-container>

        </md-content>
    </md-tab>

    <md-tab label="Depends on">
        <md-content layout-padding>
            <depends-on dependson='dependson'></depends-on>
        </md-content>
    </md-tab>

</md-tabs>